<template>
  <div>
    <div class="top">
      <div class="top_header">
          <span class="top_city" @click="$router.history.go(-1)" style="color:#fff"><i class="fa-left"></i>返回</span>
          <h1>个人中心</h1>
      </div>
    </div>
    <div class="panel">
      <div class="panel-cell">
        <div class="panel-cell-hd plupload">
          <img :src="$store.state.wxuser.head_img">
        </div>
        <div class="panel-cell-bd">
          <h4>{{$store.state.wxuser.nickname}}</h4>

          <p>
            <span v-if="$store.state.wxuser.agent==1">平台代理</span>
            <span v-else>普通会员</span>
             <div id="qrcode" @click="showMaskClosable=true" v-if="$store.state.wxuser.agent==1">
               <i class="iconfont icon-erweima" style="font-size: 25px;color:#666"></i>
             </div>
          </p>
        </div>
      </div>
    </div>
    <div class="rankings">
      <div class="rankings-m">可用余额：<span>{{ac_fee}}元</span></div>
      <div class="rankings-p">
        <span class="cz" @click="$router.push({name:'charge'})">充值</span>
        <span class="jl"  @click="$router.push({name:'aclist'})">充值记录</span></div>
    </div>
    <div class="card-list">
      <div class="panel-well"  @click="$router.push({name:'Userinfo'})">
        <div class="panel-well-hd">
          <img src="../assets/images/icon-u01.png" alt="">
        </div>
        <div class="panel-well-bd">
          <h4>个人信息</h4>
        </div>
        <div class="panel-well-fr">
          <template v-if="$store.state.wxuser.xyf==1">免押金</template>
          <template v-else-if="$store.state.wxuser.real_name && $store.state.wxuser.phone && $store.state.wxuser.id_num">已完善</template>
          <template v-else><span class="mr" style="color:#de2905;font-size:15px;">未完善</span></template>
        </div>
      </div>
      <div  class="panel-well">
        <div class="panel-well-hd">
          <img src="../assets/images/icon-u02.png" alt="">
        </div>
        <div class="panel-well-bd" >
          <h4>我的订单</h4>
        </div>
        <div class="panel-well-fr" @click="$router.push({name:'OrderList'})">查看所有订单信息</div>
      </div>
      <div  class="panel-well" @click="$router.push({name:'Idphoto'})">
        <div class="panel-well-hd">
          <img src="../assets/images/icon-u03.png" alt="">
        </div>
        <div class="panel-well-bd">
          <h4>身份证认证</h4>
        </div>
        <div class="panel-well-fr">
          <template v-if="$store.state.wxuser.id_photo_a && $store.state.wxuser.id_photo_b">已上传</template>
          <template v-else><span class="mr" style="color:#de2905;font-size:15px;">未认证</span></template>
        </div>
      </div>
      <div @click="$router.push({name:'LicenPhoto'})" class="panel-well">
        <div class="panel-well-hd">
          <img src="../assets/images/icon-u04.png" alt="">
        </div>
        <div class="panel-well-bd">
          <h4>驾驶证认证</h4>
        </div>
        <div class="panel-well-fr">
          <template v-if="$store.state.wxuser.license_a && $store.state.wxuser.license_b">已上传</template>
          <template v-else><span class="mr" style="color:#de2905;font-size:15px;">未认证</span></template>
        </div>
      </div>
      <div class="divHeight"></div>
      <div href="#" class="panel-well">
        <div class="panel-well-hd">
          <img src="../assets/images/icon-u05.png" alt="">
        </div>
        <div class="panel-well-bd">
          <h4>违章专区</h4>
        </div>
        <div class="panel-well-fr"></div>
      </div>
      <a href="tel:18174123678" class="panel-well">
        <div class="panel-well-hd">
          <img src="../assets/images/icon-u06.png" alt="">
        </div>
        <div class="panel-well-bd">
          <h4>联系客服</h4>
        </div>
        <div class="panel-well-fr">遇到问题找客服</div>
      </a>
    </div>
  </div>

</template>

<script>
export default {
  name: 'Account',
  data () {
    return {
      showMaskClosable: false,
      nurl: `http://tmc.guotaijinxing.com/wx/entrytmc?relId=` + this.$store.state.wxuser.openid,
      ac_fee: '0.00'
    }
  },
  created: async function () {
    this.ac_fee = this.$store.state.wxuser.balance
    this.$store.dispatch('getUser')
  },
  beforeMount: async function () {
    let _url = await this.$api.post('/getUrl', {openid: this.$store.state.wxuser.openid})
    this.nurl = _url.data
    this.getu()
  },
  methods: {
    async getu () {
      let _u = await this.$api.post('/getu', {openid: this.$store.state.wxuser.openid})
      if (_u.data.state) {
        this.ac_fee = _u.data.data.balance
      }
    }
  }
}
</script>

<style scoped>
  /* 公共样式表css */
  html,body {
    color: #333;
    margin: 0;
    height: 100%;
    font-family: "Myriad Set Pro","Helvetica Neue",Helvetica,Arial,Verdana,sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: normal;
  }
  * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

  a {
    text-decoration: none;
    color: #000;
  }

  a, label, button, input, select {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }

  img {
    border: 0;
  }

  body {
    background: #fff;
    color: #666;
  }

  html, body, div, dl, dt, dd, ol, ul, li, h1, h2, h3, h4, h5, h6, p, blockquote, pre, button, fieldset, form, input, legend, textarea, th, td {
    margin: 0;
    padding: 0;
  }

  a {
    text-decoration: none;
    color: #08acee;
  }

  button {
    outline: 0;
  }

  img {
    border: 0;
  }

  button,input,optgroup,select,textarea {
    margin: 0;
    font: inherit;
    color: inherit;
    outline: none;
  }

  li {
    list-style: none;
  }

  a {
    color: #666;
  }

  .clearfix::after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
  }

  .clearfix {
  }
  /*个人中心*/
  .panel {
    border-top:1px solid #4b75e5;
    padding: 15px 15px 50px 15px;
    background: #5786fc;
  }

  .panel-cell {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    color: #333333;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    position: relative;
  }

  .panel-cell-hd {
    margin: 0 auto;
    width: 80px;
    height: 60px;
    text-align: center;
  }

  .panel-cell-hd img {
    width: 72px;
    height: 72px;
    display: block;
    border: none;
    border-radius: 100%;
    background: rgba(255, 255, 255, 0.2);
    padding: 4px;
  }
  .panel-cell-hd .avatar {
    width: 72px;
    height: 72px;
    display: block;
    line-height: 72px;
    border: none;
    border-radius: 100%;
    background: rgba(255, 255, 255, 0.2);
  }

  .panel-cell-bd {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
  }

  .panel-cell-bd h4 {
    font-weight: 400;
    font-size: 19px;
    width: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    word-wrap: break-word;
    word-break: break-all;
    color: #fff;
    line-height: 30px;

  }
  .team-name-box{width: 100%;height: auto;overflow: hidden;}
  .panel-cell-bd p {
    color: #d6d4e7;
    font-size: 14px;
    line-height: 20px;
    margin-top: 5px;
  }
  .panel-cell-bd span{
    background: #10b91c;
    border-radius: 4px;
    color: #fff;
    font-size: 12px;
    padding: 3px 8px 3px 8px;
  }

  .panel-cell-fr {
    text-align: right;
    font-size: 0.7rem;
    padding-right: 10px;
    color: #757983;
  }

  .panel-cell-fr:after {
    content: " ";
    display: inline-block;
    height: 6px;
    width: 6px;
    border-width: 1px 1px 0 0;
    border-color: #b2b2b2;
    border-style: solid;
    -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    position: relative;
    top: -2px;
    position: absolute;
    top: 50%;
    margin-top: -4px;
    right: 0;
    border-radius: 1px;
  }
  .tabBar-item-text {
    display: inline-block;
    font-size: 0.7rem;
    color: #929292;
    padding-top: 1px;
  }

  .tabBar-item-active .tabBar-item-text {
    color: #f8513f;
  }
  .rankings{width: 92%;height: 60px;background: #fff;overflow: hidden;border-bottom: 1px solid #E5E5E5;margin: -25px auto 20px auto;border-radius: 8px;-webkit-box-shadow:0 0 10px rgba(192, 200, 255, .9);
    -moz-box-shadow:0 0 10px rgba(192, 200, 255, .9);
    box-shadow:0 0 10px rgba(192, 200, 255, .9);}
  .rankings-m {
    width: 45%;
    height: 60px;
    line-height: 60px;
    text-align: center;
    float: left;

  }
  .rankings-m span{color: #dc510d;font-size: 18px;}
  .rankings-p {
    width: 53%;
    height: 60px;
    line-height: 60px;
    text-align: center;
    float: right;
    color: #999;
    font-size: 14px;

  }
  .rankings-p span{margin-right: 10px;}
  .cz{background:url(../assets/images/tx-btn.png)no-repeat center;
    background-size:100% 100%; padding: 5px 18px;
    color: #dc510d;font-size: 16px;font-weight: bold;}
  .jl{background:#f2f2f2;border-radius: 10px;color: #797878;font-size: 15px;padding: 5px 8px;}
  .divHeight {
    width: 100%;
    height: 10px;
    background: #f2f4ff;
  }

  .card-list {
    background: #fff;
  }
  .panel-well {
    padding: 18px 18px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    color: #999;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    position: relative;
  }

  .card-list .panel-well:before {
    content: " ";
    position: absolute;
    bottom: -1px;
    right: 0;
    height: 1px;
    border-bottom: 1px solid #E5E5E5;
    color: #E5E5E5;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    left: 0;
  }

  .panel-well-hd img {
    width: 22px;
    height: auto;
    margin-right: 5px;
    display: block;
    border: none;
  }

  .panel-well h4 {
    font-weight: 400;
    font-size: 0.85rem;
    width: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    word-wrap: break-word;
    word-break: break-all;
  }

  .panel-well-fr {
    text-align: right;
    font-size: 14px;
    padding-right: 20px;
    color: #bababa;
  }

  .card-list .panel-well-fr:after {
    content: " ";
    display: inline-block;
    height: 6px;
    width:6px;
    border-width: 2px 2px 0 0;
    border-color: #c9c9c9;
    border-style: solid;
    -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    position: relative;
    top: -2px;
    position: absolute;
    top: 50%;
    margin-top: -4px;
    right: 22px;
    border-radius: 1px;
  }

  .panel-well-bd {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
  }

  .panel-well-bd h4 {
    font-weight: 400;
    font-size: 15px;
    width: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    word-wrap: break-word;
    word-break: break-all;
    color: #666;
  }

  .badge {
    display: inline-block;
    padding: .15em .4em;
    min-width: 8px;
    border-radius: 18px;
    background-color: #eb4735;
    color: #FFFFFF;
    line-height: 1.2;
    text-align: center;
    font-size: 12px;
    vertical-align: middle;
    padding: 4px;
    min-width: 0;
    margin-left: 5px;
    margin-right: 5px;
  }
  .panel-well:active{
    background:#eee;
  }
  .exit-center{
    width: 100%;
    height: 50px;
    border-bottom:1px solid #f2f2f2;
    border-top:1px solid #f2f2f2;
    background: #fff;
    text-align: center;
    font-size: 18px;
    color: #666;
    line-height: 50px;
    margin-bottom: 20px;
  }
  .top {
    width: 100%;
    height: 50px;
    overflow: hidden;
  
}
.top_header {
    background:#5786fc;
    width: 100%;
    position: relative;
    height: 50px;
    border-bottom:1px solid #69a8ff;

}
  .top_header a {
    margin: 0;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
  }
  .top_city {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    width: auto;
    height: 50px;
    position: absolute;
    left: 20px;
    top: 0;
    line-height: 50px;
    font-size: 16px;
  }
  .top_city i {
    font-size: 16px;
    margin-top: 2px;
  }
  .top_user {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    width: auto;
    height: 45px;
    position: absolute;
    right: 15px;
    top: 2px;
  }
  .top_user i {
    font-size: 30px;
  }
  .fa-left{
    width: 20px;
    height: 30px;
    background:url(../assets/images/ico-left.png)no-repeat center;
    background-size:8px auto;

}
.top_header h1 {
    text-align: center;
    line-height: 50px;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
}
</style>
